---
id: label
title: Label
sidebar_label: Label
---

The `Label` component is a simple and versatile component used to display text content with a label style.
You usually use it to display a label for an input field, like a checkbox, or radio button.

## Usage

To use the `Label` component, import it from your components. You can pass a `border` prop to add a border around the label.
You can also pass any of the HTML `label` props, such as `htmlFor`, `className`, and `style`.



import CodeSample from "../../src/CodeSample";
import CodeBlock from "@theme/CodeBlock";

## Label with a Checkbox

Simple example of using the `Label` component to create a basic surface for content.

import LabelCheckboxDemo from '../../samples/components/label/label_checkbox';
import LabelCheckboxSource from '!!raw-loader!../../samples/components/label/label_checkbox';

<CodeSample>
    <LabelCheckboxDemo/>
</CodeSample>

<CodeBlock language="tsx">{LabelCheckboxSource}</CodeBlock>

## Label with a Radio Button

This is an example of using the `Label` component with a radio button.

import LabelRadioButtonDemo from '../../samples/components/label/label_radio_group';
import LabelRadioButtonSource from '!!raw-loader!../../samples/components/label/label_radio_group';

<CodeSample>
    <LabelRadioButtonDemo/>
</CodeSample>

<CodeBlock language="tsx">{LabelRadioButtonSource}</CodeBlock>
